<template>
    <div>
        <el-card class="box-card" :class="getUser?'loginColor':'unLoginColor'">
            <div @mouseenter="enter" @mouseleave="leave">
                <div v-if="getUser">
                    <div slot="header" class="clearfix">
                        <span>{{getUser.nickname}}</span>
                        <span style="float: right">
                            <div v-if="getUser.sex==='male'">
                                 <icon-font href="#cemale"/>
                            </div>
                            <div v-else>
                                   <icon-font href="#cefemale"/>
                            </div>
                        </span>
                    </div>
                    <div class="text item">
                        <span>欢迎登录云逸社区</span>
                        <br>
                        上次登录时间<span style="margin-left: 30px">
                        {{getUser.lastLoginTime? lastLoginTime :'第一次登录哦'}}
                    </span>
                    </div>
                    <div class="text item">
                        <span>{{getUser.description?getUser.description:'这个人很懒，什么都没留下'}}</span>
                        <br>
                        <div style="padding: 0 30px">
                            <span style="float: left">粉丝数：{{getUser.fansCount}}</span>
                            <span style="float: right">关注数：{{getUser.userAttentionCount}}</span>
                        </div>
                    </div>
                    <div class="nav-box">
                        <div class="nav-list">
                            <div>
                                <router-link to="/user/info">个人信息</router-link>
                            </div>
                            <div>
                                <router-link to="/user/attention">我的关注</router-link>
                            </div>
                            <div>
                                <router-link to="/user/post">我的帖子</router-link>
                            </div>
                        </div>
                        <div class="nav-list">
                            <div>
                                <router-link to="/user/collect">我的收藏</router-link>
                            </div>
                            <div>
                                <router-link to="/user/fans">我的粉丝</router-link>
                            </div>
                            <div>
                                <router-link to="/user/reply">我的评论</router-link>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <el-button v-if="getUser.hasAdminRole"
                                   type="warning" @click="goToAdmin" plain>进入管理界面
                        </el-button>
                    </div>
                    <div class="item">
                        <el-button style="float: right;margin-bottom: 20px"
                                   size="mini" type="success" @click="logout" plain>退出登录
                        </el-button>
                    </div>
                </div>
                <div v-else>
                    <div slot="header" class="clearfix">
                        <span style="float: left;">您还没有登录哦╮(╯▽╰)╭</span>
                    </div>
                    <br>
                    <div v-for="(s,index) in loginMessage" :key="index" class="text item">
                        <icon-font href="#cezan"/>
                        {{s}}
                    </div>
                    <div class="item">
                        <el-button class="full-width" type="primary" @click="goToLogin">登录</el-button>
                        <span class="font-small">首次使用？<router-link to="/register">点我去注册</router-link></span>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import dateUtil from 'element-ui/src/utils/date'

    export default {
        name: 'UserInfoCard',
        data () {
            return {
                loginMessage: [
                    '参与到话题的热烈讨论中(ง •̀_•́)ง',
                    '(｡◕ˇ∀ˇ◕）关注支持喜欢的项',
                    '为感兴趣的社区内容收藏，关注，投票！(☆ﾟ∀ﾟ) ',
                    '发表自己独到的见解和想法到好点子',
                    '成为众多成员的一份子ヾ(o◕∀◕)ﾉ ヾ(o◕∀◕)ﾉ ヾ(o◕∀◕)ﾉ',
                    '您也可以：申请成为管理员，管理自己的三分地o(*≧▽≦)ツ ',
                    '(*´∇｀*)  成为领头人，带动讨论热潮～～'
                ]
            }
        },
        computed: {
            ...mapGetters('user', [
                'getUser'
            ]),
            lastLoginTime () {
                return dateUtil.format(new Date(this.getUser.lastLoginTime - 8 * 60 * 60 * 1000), 'yyyy-MM-dd HH:mm:ss')
            }
        },
        methods: {
            ...mapActions('user', {
                logoutAction: 'logout'
            }),
            enter () {
                this.$emit('toCard', true)
            },
            leave () {
                this.$emit('toCard', false)
            },
            goToLogin () {
                this.$router.push('/login')
            },
            goToAdmin () {
                this.$router.push('/admin')
            },
            logout () {
                this.action(this.logoutAction(), data => {
                    this.$message({
                        message: '注销成功',
                        type: 'success'
                    })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .text {
        font-size: 14px;
        color: #024e68;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 320px;
        right: 15px;
        position: fixed;
        z-index: 999;
    }

    .unLoginColor {
        background-color: rgba(58, 170, 207, 0.75);
    }

    .loginColor {
        background-color: rgba(166, 203, 252, 0.72);
    }

    .full-width {
        width: 100%;
    }

    .font-small {
        font-size: 12px;
    }

    .nav-box {
        padding: 20px 30px;

        .nav-list {
            width: 50%;
            display: inline-block;

            div {
                margin: 15px auto 15px;
            }
        }
    }

    a {
        text-decoration: none;
    }

    a:link {
        color: #216278;
    }

    a:visited {
        color: #216278;
    }

    a:hover {
        color: rgba(255, 151, 60, 0.8);
    }

    a:active {
        color: rgba(255, 86, 25, 0.8);
    }
</style>
